<template>
  <div class="c-article__contain">
    <div style="flex: none">发布时间: {{createOn | filterTime}}</div>
    <div class="c-article__content markdown-body" v-html="article">
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'

export default {
  name: 'MartinArticleDetail',
  filters: {
    filterTime(val) {
      return dayjs(val).format('YYYY-MM-DD HH:mm')
    }
  },
  data() {
    return {
      article: '',
      createOn: new Date()
    }
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      this.$http.get('/article/detail/' + this.$route.params.id).then(({data, status}) => {
        if (status === 200) {
          this.article = data.content
          this.createOn = data.createOn
        }
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style scoped>
.c-article__contain {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.c-article__content {
  /* font-size: 18px; */
  flex: 1;
  overflow-y: auto;
}

.c-article__content pre {
  padding: 16px;
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
  background-color: #f6f8fa;
  border-radius: 3px;
}
</style>
